let shopS = document.querySelector('.shopS');
let cartall = document.querySelector('.cartall');
let savetall = document.querySelector('.savetall');

// 渲染
render(lists);

/* 1.渲染封装 */
function render(data){
    // 解构赋值
    shopS.innerHTML = data.map(({img,title,id,size,oriPrice,nowPrice,num})=>{

        // 折扣总价
        let saveTotal = ((oriPrice-nowPrice)*num).toFixed(2);

        return `
        <tr class="shopList" id=${id}>
            <td class="imgTd"><img class="shops" src="../images/${img}" alt="" srcset=""></td>
            <td class="titleTd">
                <h6>${title}</h6>
                <span>ID:#${id}</span>
                <span>Size:${size}</span>
            </td>
            <td class="Son2">
                <span class="reduce">-</span>
                <input type="text" value="${num}" class="count">
                <span class="add">+</span>
            </td>
            <td class="Son3">
                <del class="oriPrice">${oriPrice} py6</del>
                <b class="nowPrice">${nowPrice} py6</b>
            </td>
            <td class="Son4">
                <span class="priceAll">${(oriPrice*num.toFixed(2))} py6</span>
                <span class="saveAll">You save ${saveTotal} py6</span>
            </td>
            <td class="Son5">
                <img class="del" src="../images/del.png" alt="">
            </td>
        </tr>
        `
    }).join('');

    /* 2. reduce计算总价和折扣 */
    // 2.1 计算总价
    console.log(lists);
    let total = lists.reduce((pre,cur) => {
        return pre+(cur.oriPrice*cur.num)
    },0);

    cartall.innerHTML = `Cart Total: <b>${total.toFixed(2)} py6.</b>`;

    // 2.2 计算折扣
    let saveTotal = lists.reduce((pre,cur) => {
        return pre+((cur.oriPrice-cur.nowPrice)*cur.num)
    },0);

    savetall.innerHTML = `Cart Total: <b>${saveTotal.toFixed(2)} py6.</b>`;
}

/* 3.点击事件 */
let $tr,$id;

// 通过事件委托给table绑定点击事件，触发add、reduce、delete
let shop = document.querySelector('.shop');
shop.onclick = e =>{
    switch(e.target.className){
        case 'reduce':
            // 获取父元素和id
            $tr = e.target.parentNode.parentNode;
            $id = $tr.id;
            // 找到对应的数据进行减值后，重新渲染
            lists.forEach(item=>{
                if(item.id==$id && item.num>0){
                    item.num--;
                    render(lists);
                }
            })
            break
        case 'add':
            // 获取父元素和id
            $tr = e.target.parentNode.parentNode;
            $id = $tr.id;
            
            // 找到对应的数据进行增值后，重新渲染
            lists.forEach(item=>{
                if(item.id==$id){
                    item.num++;
                    render(lists);
                }
            })
            break
        case 'del':
            let res = confirm('是否移除该商品');
            if (res) {
                // 获取父元素和id
                $tr = e.target.parentNode.parentNode;
                $id = $tr.id;

                // 找到对应的数据进行删除处理
                lists.forEach((item,idx,array) => {
                    if (item.id == $id) {
                        array.splice(idx,1);
                        render(lists);
                    }
                })
            }
            break
    }
}






